<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../jquery-3.7.1.js"></script>

    <style>
        .aa {
            color: red;
            text-decoration: underline;
        }

        .bb {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    
</head>
<body>
    <!-- self-tag：用户自定义属性 -->
    <p align="left" self-tag="必须的" class="bb">
        好好学习，天天向上
    </p>

    <button id="btn1">设置样式1</button>
    <button id="btn2">设置样式2</button>
    <button id="btn3">移除样式</button>
    <button id="btn4">切换样式</button>
    <button id="btn5">判断是否存在某个类</button>
    
    <!-- 第三：使用 JQ -->
    <script>
        $("#btn1").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p")
           
            // 第二：进行相关的操作 - 设置 style 属性值
           pNode.attr("style","color:red;text-decoration: underline;") ;
        }) ;

        $("#btn2").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p")
           
            // 第二：进行相关的操作 - 追加 aa 样式类
            pNode.addClass("aa") ;
            // pNode.attr("class","aa") ;
        }) ;

        $("#btn3").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p")
           
            // 第二：进行相关的操作 - 删除 aa 样式类
           pNode.removeClass("bb")
        }) ;

        $("#btn4").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p")
           
            // 第二：进行相关的操作 - 切换 aa 样式类 - 存在aa则删除，没有则添加
           pNode.toggleClass("bb")
        }) ;

        $("#btn5").click(function(){
            // 第一：选择要操作的节点 
            var pNode = $("p")
           
            // 第二：进行相关的操作 - 判断是否存在 aa 这个类样式
           var bl = pNode.hasClass("aa");
           console.log(bl);
           
        }) ;

        



    </script>
</body>
</html>